<template>
  <div id="changePassword">
    <h2>修改密码</h2>
    <div class="changePwd">
      <p>原密码</p>
      <input type="password" v-model="judgePwd.password" class="input-100">
    </div>
    <div class="changePwd">
      <p>新密码</p>
      <input type="password" v-model="newPassword" class="input-100">
    </div>
    <div class="changePwd">
      <p>重复密码</p>
      <input type="password" v-model="newPassword_2" class="input-100">
    </div>

    <div class="changePwd changePwd_">
      <button class="button button-color-white" @click="changePassword">保存</button>
      <button class="button button-color-white" @click="clearInput">取消</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'A',
    data(){
      return{
        judgePwd:{
          userId:JSON.parse(sessionStorage.user).userId,
          password:'',
        },
        newPassword:'',
        newPassword_2:''
      }
    },
    methods:{
      clearInput(){
        this.judgePwd.password = ''
        this.newPassword = ''
        this.newPassword_2 = ''
      },
      async changePassword(){
        if(this.judgePwd.password === '' || this.newPassword === '' || this.newPassword_2 === ''){
          this.$message.warning("请输入完整")
        }else{
            if(this.judgePwd.password === this.newPassword){
              this.$message.warning("新密码不能与旧密码一致")
            }else{
              const {data:res} = await this.$axios.post('v1/judgePassword',this.judgePwd)
              if(res.code === 200){
                if(this.newPassword.length >= 8){
                  if(this.newPassword === this.newPassword_2){
                    const newPwd = {
                      userId: JSON.parse(sessionStorage.user).userId,
                      password: this.newPassword,
                    }
                    const {data:res_} = await this.$axios.post('v1/updatePassword',newPwd)
                    if(res_.code === 200){
                      this.$message.success('更改成功,两秒后刷新页面')
                      setTimeout(this.reloadPage,2000)
                    }else{
                      this.$message.error('请检查网络')
                    }
                  }else{
                    this.$message.warning("两次输入密码不一致")
                  }
                }else{
                  this.$message.warning("新密码不能少于8给字符")
                }
              }else{
                this.$message.error('原密码错误')
              }
            }
        }

      },
      reloadPage(){
        location.reload();
      }
    }
  }
</script>

<style lang="less" scoped>
  h2{
    margin-top: 30px;
    font-size: 24px;
    color: var(--theme-fontMain);
  }
  p{
    width: 100px;
    height: 50px;
    color: var(--theme-fontMain);
  }
  .changePwd{
    margin-top: 30px;
    display: flex;
  }
  .changePwd_{
    display: flex;
    justify-content: space-between;
  }
  #changePassword{
    width: 50rem;
  }
  button{
    width: 45%;
  }
</style>
